<template>
    <!--<div>殡葬服务业务指导</div>-->
    <div>
        <!--<Button type="primary" @click="modal1 = true">模态框详情</Button>-->
        <Modal v-model="modal1" title="xxx事件详情" @on-ok="ok" @on-cancel="cancel" width="60">
            <div class="detail">
                <span  style="font-size: 20px;color: black"><b>安家居百姓养老院</b></span>
                <Row class="p10">
                    <Col span="1">
                        <span class="bold"> <Icon type="md-call" color="black" size="20" /></span>

                    </Col>
                    <Col span="10">
                        <span><b>13478362401</b></span>
                    </Col>
                </Row>
                <Row class="p10">
                    <Col span="1">
                        <span class="bold"><Icon type="md-pin" color="black" size="20" /></span>
                    </Col>
                    <Col span="10">
                        <span ><b>沈阳 皇姑 长客 皇姑院区鸭绿江街16号</b>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: dodgerblue;">导航</span></span>
                    </Col>
                </Row>

                <span style="color: red;font-size: 30px;"><strong>|</strong></span>
                <span style="font-size: 20px;color: black">单位介绍</span>
                <Row class="p10">
                    <Col span="24">
                        <div>双击编金太阳养老产业集团下设三所养老公寓，一所老年大学，多家候鸟公馆相结合的高端养老综合体。辑文本</div>
                    </Col>
                </Row>
                <span style="color: red;font-size: 30px;"><strong>|</strong></span>
                <span style="font-size: 20px;color: black">从业人员</span><br>
                <div class="select">
                    <div class="select1">
                        <Input  placeholder="人员姓名" style="width: 180px" />
                    </div>
                    <div class="select2">
                        <BUTTON type="primary" >搜索</BUTTON>
                    </div>
                </div>

                <div class="all">
                    <Row :gutter="16">
                        <!--<div class="b1">-->
                        <Col span="6">
                            <div class="b1"><img src="../../../../assets/images/login-bg.jpg" width="150px" height="200px"/><br>
                            </div>
                        </Col>
                        <!-- </div>-->
                        <Col span="6">
                            <div class="b2"><img src="../../../../assets/images/login-bg.jpg" width="150px" height="200px"/></div>
                            <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;张三</span><br/>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;副院长</span>
                        </Col>
                        <Col span="6">
                            <div class="b3"><img src="../../../../assets/images/login-bg.jpg" width="150px" height="200px"/></div>
                            <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;张三</span><br/>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他职务</span>
                        </Col>
                        <Col span="6">
                            <div class="b4"><img src="../../../../assets/images/login-bg.jpg" width="150px" height="200px"/></div>
                            <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;张三</span><br/>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他职务</span>
                        </Col>
                    </Row>
                </div>
            </div>

        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: true
    }
  },
  methods: {
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    }
  }
}
</script>

<style scoped>
    .detail{
        font-size: 14px;
    }
    .bold{
        font-weight: bold;
        margin-right: 4px;
    }
    .p10{
        padding: 10px;
    }
    .select1{
        float: right;
        margin-right: 250px;
        margin-top: 50px;

    }
    .select2{
        text-align: center;
        float: right;
        margin-right: -250px;
        margin-top: 54px;
        width: 100px;
        height:70px;
    }
    .all{
        margin-left: 70px;
        margin-top: 170px;
    }
    .b1{
        border: #4E5465 1px solid;
        width: 150px;
        height: 200px;
    }
    .b2{
        border: #4E5465 1px solid;
        width: 150px;
        height: 200px;
    }
    .b3{
        border: #4E5465 1px solid;
        width: 150px;
        height: 200px;
    }
    .b4{
        border: #4E5465 1px solid;
        width: 150px;
        height: 200px;
    }

</style>
